/**
 * 复习 手写vue3.0 响应式原理
 */

/**
 * 判断是否是对象
 * @param object
 */
function isObject(object) {
    return typeof object === 'object' || object === null
}

/**
 * 创建响应式对象
 * @param target
 */
function reactive(target) {
    if (!isObject(target)) {
        return target
    }
    const handle = {
        get(target, key, receiver) {
            console.log('get')
            const res = Reflect.get(target, key, receiver)
            return isObject(res)?reactive(res):res
        },
        set(target, key, value, receiver) {
            if (value !== target[key]) {
                console.log('set')
                updateView()
            }
            return Reflect.set(target, key, value, receiver)
        },
        deleteProperty(target, key) {
            console.log('del')
            return Reflect.deleteProperty(target, key);
        }
    }
    const observe = new Proxy(target, handle)
    return observe
}

/**
 * 更新视图
 */
function updateView() {
    console.log('更新视图')
}

/**
 * 1 处理简单的一级的对象属性
 */
/*const obj = {
    a: 1,
}
const proxy = reactive(obj)
proxy.a = 12
console.log(proxy.a)*/

/**
 * 2 处理多级对象属性
 */
const obj = {
    a: {
        b: 1
    },
}
const proxy = reactive(obj)
proxy.a.b = 12
console.log(proxy.a.b)

/**
 * 3 处理 直接赋值是对象 然后修改属性无法响应
 */
/*const obj = {
    a: 1,
}
const proxy = reactive(obj)
proxy.a = {b: 12}
proxy.a.b = 13
console.log(obj.a.b)*/

/**
 * 4 不存在的属性 无法响应 因为递归时没有这个属性 无法创建响应式对象
 */
/*const obj = {
    a: 1,
}
const proxy = reactive(obj)
proxy.b = 14
console.log(proxy.b)*/

/**
 * 5 处理数组 push shift unshift splice reverse pop sort
 */
/*const obj = {
    a: [1,2,3,4,5],
}
const proxy = reactive(obj)
// proxy.a.push(4)
// proxy.a.reverse()
// proxy.a.pop()
// proxy.a.splice(4,1)
// proxy.a.shift()
// proxy.a.unshift()
proxy.a.sort()
console.log(proxy.a)*/
